<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>

<head>
    <meta charset="utf-8"/>
    <title>待办</title>
    <!--<link rel="stylesheet" th:href="@{/app/emessage/sms/emessage/css/base.css}"/>
        <link rel="stylesheet" th:href="@{/app/emessage/sms/emessage/css/index.css}"/>
        <script th:src="@{/app/emessage/sms/emessage/js/jquery-2.1.4.min.js}"></script>
        <script th:src="@{/app/emessage/sms/emessage/js/index.js}"></script>-->
    <link rel="stylesheet" href="http://inside-project.hfx.net/app/emessage/sms/emessage/css/base.css"/>
    <link rel="stylesheet" href="http://inside-project.hfx.net/app/emessage/sms/emessage/css/index.css"/>
    <script src="http://inside-project.hfx.net/app/emessage/sms/emessage/js/jquery-2.1.4.min.js"></script>
    <script src="http://inside-project.hfx.net/app/emessage/sms/emessage/js/index.js"></script>

</head>
<body class="bg_f5">

<div class="the_portal">
    <input id="userId" type="hidden" th:value="${user.userId}">
    <input id="appId" type="hidden" th:value="${user.appId}">
    <div class="top_fix">
        <div class="the_top_but_bar">
            <div class="the_top_but_bar_r">
                <a class="on" href="javascript:;">待办<span>90+</span></a>
                <div class="clear"></div>
            </div>
        </div>

    </div>


    <div class="list on" id="daiban_list">


    </div>
    <a class="go_more" href="javascript:;">加载更多...</a>


</div>


<div class="zhazao_bai"></div>

<script type="text/javascript">

    /**************************20161010******************************************/

    var pageNum = 1;
    var pageSize = 10;
    var the_str = "";
    var url = "todoLists";
    var userId = $("#userId").val();
    var appId = $("#appId").val();

    //获取页面顶部被卷起来的高度
    function scrollTop() {
        return Math.max(
            //chrome
            document.body.scrollTop,
            //firefox/IE
            document.documentElement.scrollTop);
    }

    //获取页面文档的总高度
    function documentHeight() {
        //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //获取页面浏览器视口的高度
    function windowHeight() {
        //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
        return (document.compatMode == "CSS1Compat") ?
            document.documentElement.clientHeight :
            document.body.clientHeight;
    }


    //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
    $(window).on('scroll', function () {
        if (scrollTop() + windowHeight() >= (documentHeight() /*滚动响应区域高度取*/)) {
            waterallowData();
        }
    });

    function waterallowData() {
        getData();

    }

    //获取待办信息
    function getData() {
        pageNum += 1;
        var page = pageNum;
        var size = pageSize;
        the_str = "";
        $.ajax({
            type: 'get',
            url: url,
            data: {"page": page, "size": size, "userId": userId,"appId":appId},
            async: true,
            dataType: 'json',
            success: function (data) {

                var list = data.list;
                for (var i = 0; i < list.length; i++) {
                    var _str = '<div class="list_i">' +
                        '<div class="list_i_r">' +
                        '<a href="' + list[i].url + '" class="list_i_r_title readed">标题：' +
                        list[i].content +
                        '</a>' +
                        '<div class="list_i_r_c"><p>应用名称：'+list[i].appName+'</p></div>'+
                        '<div class="list_i_r_c">' +
                        '<p>上一处理人：' +
                        formatName(list[i].parentowner) +
                        '</p>' +
                        '<div class="shijian">' +
                        formatDateTime(new Date(list[i].modifytime)) +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="clear"></div>' +
                        '</div>';
                    the_str += _str;
                }
                if (the_str != "") {
                    $(".list").append(the_str);
                } else {
                    if (pageNum > 1) {
                        pageNum -= 1;
                    }
                    $(".go_more").html("已拉到底部");
                }
            }
        })
    }

    //日期格式化(yyyy-MM-dd HH:mm:ss)
    formatDateTime = function (date) {
        var datetime = date.getFullYear()// "年"
            + "-"
            + ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1))// "月"
            + "-"
            + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
            + " "
            + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())
            + ":"
            + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())
            + ":"
            + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
        return datetime;
    }

    formatName = function (name) {
        return name == null ? "" : name;
    }

    /**************************************************20161013*************************************************************/

    $(document).ready(function () {

        $(".bai_ceng").bind("touchmove", function () {
            $(".bar_but_list").hide();
            $(".bai_ceng").hide();
        });

        $(".bai_ceng").bind("click", function () {
            $(".bar_but_list").hide();
            $(".bai_ceng").hide();
        });

        $(document).on('click', '.zhe_link', function () {

            $(".zhazao_bai").show();

        });
        var page = pageNum;
        var size = pageSize;

        $.ajax({
            type: 'get',
            url: url,
            data: {"page": page, "size": size, "userId": userId,"appId":appId},
            async: true,
            dataType: 'json',
            success: function (data) {
                var list = data.list;
                var total = data.total;
                the_str = "";
                for (var i = 0; i < list.length; i++) {
                    var _str = '<div class="list_i">' +
                        '<div class="list_i_r">' +
                        '<a href="' + list[i].url + '" class="list_i_r_title readed">标题：' +
                        list[i].content +
                        '</a>' +
                        '<div class="list_i_r_c"><p>应用名称：'+list[i].appName+'</p></div>'+
                        '<div class="list_i_r_c">' +
                        '<p>上一处理人：' +
                        formatName(list[i].parentowner) +
                        '</p>' +
                        '<div class="shijian">' +
                        formatDateTime(new Date(list[i].modifytime)) +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="clear"></div>' +
                        '</div>';
                    the_str += _str;
                }
                $(".on").html("");
                var daiban = '待办<span>' + total + '</span>';
                $(".on").append(daiban);
                $(".list").html("");
                if (the_str != "") {
                    $(".list").append(the_str);
                } else {
                    $(".go_more").html("暂无待办");
                }
            }
        });


        $(document).on('click', '.go_more', function () {
            var page = ++pageNum;
            var size = pageSize;
            $.ajax({
                type: 'get',
                url: url,
                data: {"page": page, "size": size, "userId": userId, "appId": appId},
                async: true,
                dataType: 'json',
                success: function (data) {
                    var list = data.list;
                    var str = "";
                    for (var i = 0; i < list.length; i++) {
                        var _str = '<div class="list_i">' +
                            '<div class="list_i_r">' +
                            '<a href="' + list[i].url + '" class="list_i_r_title readed">标题：' +
                            list[i].content +
                            '</a>' +
                            '<div class="list_i_r_c"><p>应用名称：'+list[i].appName+'</p></div>'+
                            '<div class="list_i_r_c">' +
                            '<p>上一处理人：' +
                            formatName(list[i].parentowner) +
                            '</p>' +
                            '<div class="shijian">' +
                            formatDateTime(new Date(list[i].modifytime)) +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="clear"></div>' +
                            '</div>';
                        str += _str;
                    }
                    if (str != "") {
                        $(".list").append(str);
                    } else {
                        if (pageNum > 1) {
                            pageNum -= 1;
                        }
                        $(".go_more").html("已拉到底部");
                    }
                }
            });
        });


    })

</script>
</body>
</html>